<template>
  <div class="interfacelist-con">
    <div class="interfacelist-top">今日接口概况</div>
    <div class="interfacelist-form">
      <el-row class="interfacelist-mid">
        <el-col :span="24"
                class="table-col">
          <el-table :highlight-current-row="true"
                    border
                    :header-cell-style="{ background: '#f5f5f5' }"
                    :data="interfaceList.list">
            <el-table-column type="index"
                             label="序号"
                             sortable
                             align="center"
                             :sort-method="sortNo"
                             width="100"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="sort_name"
                             label="业务名称"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <p class="workPeople"
                   @click="interfaceDetail(scope.row)">{{scope.row.sort_name}}</p>
              </template>
            </el-table-column>
            <el-table-column label="被调用次数"
                             prop="called_num"
                             align="center">
            </el-table-column>
            <el-table-column label="接口接收次数"
                             show-overflow-tooltip
                             prop="receive_num"
                             align="center">
            </el-table-column>
            <el-table-column prop="api_status"
                             label="状态"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <p :style="scope.row.api_status==='1'?'color: #000;':'color: #ff0000'">{{scope.row.api_status ==='1'?'正常':'异常' }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="access_name"
                             label="厂商"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <el-col :span="24"
                  style="margin-top:20px!important;">
            <el-pagination @current-change="handlePageChange"
                           @size-change="handleSizeChange"
                           :current-page="requestParam.page"
                           :page-size="requestParam.page_size"
                           layout="total,sizes,prev, pager, next, jumper"
                           background
                           :total="interfaceList.total_count"
                           align="center">
            </el-pagination>
          </el-col>
        </el-col>
      </el-row>
    </div>
    <div class="interfacelist-trend">
      <div class="top-right">
        <el-select v-model="interfaceValue"
                   size=mini
                   @change="selectedTrend"
                   placeholder="请选择">
          <el-option v-for="item in interfaceList.list"
                     :key="item.sort_no"
                     :label="item.sort_name"
                     :value="item.sort_no">
          </el-option>
        </el-select>
      </div>
      <div id="interfaceEcharts"
           :style="{width: '100%', height: '410px',marginTop:'0px'}"></div>
    </div>
  </div>
</template>

<script>
import { InterfaceListApi } from "@/services/ProjectCenter";

export default {
  data () {
    return {
      interfaceList: {  //表格列表
        list: [],
        total: 0,
        total_count: 0
      },
      requestParam: {
        is_page: 1,
        page_size: 10,
        page: 1,
      },
      xData: [],
      interfaceNo: '',
      interfaceValue: '',
      callNum: [], //调用次数
      receiveNum: [], //被调用次数
    }

  },
  created () {
    this.getInterfaceList()
  },
  mounted () {

  },
  methods: {
    //获取接口列表
    getInterfaceList () {
      InterfaceListApi.getInterfaceList({
        params: this.requestParam
      }).then(
        res => {
          // console.log(res, '接口列表');
          if (res.code === 0) {
            this.interfaceList = res.data;
          }
          this.interfaceNo = this.interfaceList.list[0].sort_no
          this.interfaceValue = this.interfaceList.list[0].sort_name
          this.getTrend()
          this.$nextTick(() => {
            this.interfaceEcharts();
          });
        },
        err => {
          console.log(err);
        }
      );
    },
    //分页,第几页
    handlePageChange (page) {
      this.requestParam.page = page;
      this.getInterfaceList();
    },
    //每页多少条
    handleSizeChange (val) {
      this.page_size = val
      this.getInterfaceList();
    },
    // 表格排序
    sortNo () { },
    //获取echarts异常趋势
    getTrend () {
      InterfaceListApi.setAbnormalTrend({
        params: {
          sort_no: this.interfaceNo
        }
      }).then(
        res => {
          // console.log(res, '异常趋势');
          if (res.code === 0) {
            this.xData = res.data.list.x_data
            this.callNum = res.data.list.y_data.call_num
            this.receiveNum = res.data.list.y_data.receive_num
          }
          this.interfaceEcharts()
        },
        err => {
          console.log(err);
        })
    },
    //echarts选择器选中
    selectedTrend (val) {
      this.interfaceNo = val
      this.getTrend()
    },
    //echarts
    interfaceEcharts () {
      var myChart = this.$echarts.init(document.getElementById('interfaceEcharts'));
      var xAxis = JSON.parse(JSON.stringify(this.xData))
      var option = {
        title: {
          text: '今日接口异常趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['被调用次数', '接收次数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '被调用次数',
            type: 'line',
            // stack: 'Total',
            itemStyle: {
              normal: {
                color: '#4169E1',
                lineStyle: {
                  color: '#4169E1'
                }
              }
            },
            data: this.callNum
          },
          {
            name: '接收次数',
            type: 'line',
            // stack: 'Total',
            itemStyle: {
              normal: {
                color: '#8A2BE2',
                lineStyle: {
                  color: '#8A2BE2'
                }
              }
            },
            data: this.receiveNum
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 跳转至项目详情页面
    interfaceDetail (row) {
      this.$router.push({
        path: "/EditInterface",
        query: { sortId: row.sort_no, name: row.sort_name }
      });
    },
  }
}
</script>

<style scoped lang="scss">
.interfacelist-con {
  padding: 30px;
  .interfacelist-top {
    font-size: 17px;
  }
  .interfacelist-form {
    margin-top: 15px;
    .workPeople {
      color: #409eff;
      cursor: pointer;
    }
  }
  .interfacelist-trend {
    padding: 60px 20px;
    overflow: hidden;
    .top-right {
      float: right;
      display: block;
    }
    #interfaceEcharts {
      float: left;
    }
  }
}
</style>